<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 精选-->
      <el-button type="success" size="mini" class="newbutton"
        @click="$router.push('new')" >新增试题</el-button
      >
      <el-form>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item
              label="学科"
              font-family="small"
              size="mini"
              label-width="70px" >
              <el-select v-model="xalak"  @change="erjiml">
                <el-option  v-for="item in last" :key="item.id" :label="item.subjectName" :value="item.subjectName"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" size="mini" label-width="70px">
              <el-select v-model="ermu">
                <el-option v-for="item in  erlast" :key=item.id :label="item.id" :value="item.id"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="标签" size="mini" label-width="70px">
              <el-select v-model="teg1">
                <el-option v-for="item in tag" :key="item.id" :label="item.id" :value="item.id"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="关键字" size="mini" label-width="70px">
              <el-input></el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="试题类型" size="mini" label-width="70px">
              <el-select>
                <el-option></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="难度" size="mini" label-width="70px">
              <el-select>
                <el-option></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="方向" size="mini" label-width="70px">
              <el-select>
                <el-option></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="录入人" size="mini" label-width="70px">
              <el-select>
                <el-option></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="题目备注" size="mini" label-width="70px">
              <el-input></el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" size="mini" label-width="70px">
              <el-input></el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="城市" size="mini" label-width="70px">
              <el-select class="city-1">
                <el-option></el-option>
              </el-select>
              <el-select class="city-1">
                <el-option></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6" style="text-align: right">
            <el-button size="mini">清除</el-button>
            <el-button type="primary" size="mini">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
     <!-- 表单 -->
      <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed

      label="试题编号"
      width="150" prop="number">
    </el-table-column>
    <el-table-column

      label="学科"
      width="120" prop="subject">
    </el-table-column>
    <el-table-column

      label="目录"
      width="120" prop="catalog">
    </el-table-column>
    <el-table-column

      label="题型"
      width="120" prop="questionType">
    </el-table-column>
    <el-table-column

      label="题干"
      width="300" prop="question">
    </el-table-column>
    <el-table-column

      label="录入时间"
      width="120" prop="addDate">
    </el-table-column>
    <el-table-column

      label="难度" prop="difficulty">
    </el-table-column>
    <el-table-column

      label="录入人"
     prop="creator">
    </el-table-column>
    <el-table-column

      label="审核状态"
       prop="chkState">
    </el-table-column>
    <el-table-column

      label="审核意见"
      prop="chkRemarks" >
    </el-table-column>
    <el-table-column

      label="审核人"
     prop="chkUser">
    </el-table-column>
    <el-table-column

      label="发布状态"
      prop="publishState">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template >
        <el-button  type="text" size="small">预览</el-button>
        <el-button type="text" size="small">审核</el-button>
        <el-button  type="text" size="small">修改</el-button>
        <el-button type="text" size="small">上架</el-button>
        <el-button type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
      <!-- 分页器 -->
       <el-pagination

      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-size="pagParams.pagesize"
      :current-page.sync="pagParams.page"
       :page-sizes="[5, 10, 20, 40]"
      layout="total, prev, pager, next, jumper"
      :total="pagParams.total"
      style="text-align: right"
     >

    </el-pagination>
    </div>
  </div>
</template>

<script>

import { choice } from '@/api/hmmm/questions'
import { simple as last } from '@/api/hmmm/subjects'
import { simple } from '@/api/hmmm/directorys'
import { list as tag } from '@/api/hmmm/tags'
export default {
  data () {
    return {

      counts: '',
      // 学科

      last: [],
      xalak: '',
      // 二级目录
      erlast: [],
      ermu: '',
      // 标签
      tag: [],
      tag1: '',
      // 表格
      tableData: [],

      pagParams: {
        page: 1,
        pagesize: 5,
        total: 0
      }

    }
  },
  created () {
    this.getlist()
    this.getlast()
  },

  methods: {
    async getlist () {
      const res = await choice(this.pagParams)
      console.log('aaa', res)
      this.tableData = res.data.items
      this.pagParams.total = res.data.counts
      console.log('bb', this.pagParams.total)
      console.log(this.tableData)
    },
    // 获取学科
    async getlast () {
      const data = await last()
      this.last = data.data
      console.log('hahah', this.last)
    },
    // 二级目录
    async erjiml (value) {
      console.log('xia', value)
      const res = await simple({ subjectID: value })

      console.log('res', res)
      this.erlast = res.data
      // 标签
      this.tag = await tag({ subjectID: value })
      console.log('tag', this.tag)
    }

  },
  // 分页方法

  handleCurrentChange (newPage) {
    this.pagParams.page = newPage
    this.getlist()
  },
  handleSizeChange (pageSize) {
    this.pagParams.pagesize = pageSize
    this.getlist()
  }

}

</script>

<style scoped>
.newbutton {
  margin-left: 93%;
  margin-bottom: 20px;
}
.city-1 {
  width: 85px;
}
</style>
